Cognito と外部IdP連携などの認証まわりを試すのに良いサンプルのご紹介

ちゃだいん（@chazuke4649）です。

先日、Amazon Cognito と外部IdP連携などの「認証まわり」を理解するのに最適なサンプルを教えてもらいました。これはいいと思ったので今回ご紹介します。

サンプル

こちらがそのサンプルです。

re:Inforce 2019 で使用されたデモでした

どうやらこのサンプルは、re:Inforce2019 のセッションでデモンストレーションとして使用されたものでした。 セッション全体については、以下の通り YouTube にて公開されているので、合わせてご覧ください。

スライドは以下となります。

構成図

構成は下図の通り、Amplify + Cognito + API Gateway + Lambda + DynamoDB を使用したシンプルでモダンなWebアプリとなっています。

作ってみる

詳細な手順は下記 README.md にありますのでそちらをご覧ください。

https://github.com/aws-samples/amazon-cognito-example-for-external-idp/blob/master/README.md

基本的には、以下ステップで環境一式ができてしまいます。とても簡単。

• Github リポジトリを Clone する
• 設定ファイルを変更する
• CDK を実行する

触ってみる

SPAのウェブページをどこでホストするかを３種類から選べます。

• Localhost mode
• Amazon S3 mode
• Amazon CloudFront mode

今回私は Amazon S3 mode をやってみました。構築後、S3の静的ホスティング用のURLが発行されますので、開いてみます。（※予めCognitoユーザープールへのサインアップは完了済）

とてもシンプルなログイン画面が表示されました。

事前にCognitoに登録しておいたユーザー名とパスワードを使用して、サインインを実行します。

サインインが成功し、コンテンツ画面が表示されました。このWebアプリは簡易的なペットショップのペット登録画面として作られており、実際にペットの名前と価格を登録・削除・更新することができます。

終わりに

新しい分野の学習を行う際、とにかく動くものが手元にあると理解が促進されることがよくあると思います。本サンプルは、Cognitoを使用した認証まわりの理解にはとても良いものだと思うので、これらの領域をこれから学習しようと思っている方にはとってもオススメです！

それではこの辺で。ちゃだいん（@chazuke4649）でした。